<template>
  <section :style="{ backgroundImage: `url(${material.bgi})` }">
    <header :style="{ backgroundImage: `url(${material.logo})` }"></header>
    <main>
      <div class="top">
        <div class="qr-box">
          <vue-qr
            :margin="5"
            :logoMargin="1"
            :text="qr_url"
            :size="500"
            style="width: 100%"
          ></vue-qr>
        </div>
        <div class="button-box">长按识别/扫描二维码登录</div>
      </div>
      <article class="bottom">
        <div class="logo"></div>
        <h1></h1>
        <h3>共创&nbsp;&nbsp;共建&nbsp;&nbsp;共享&nbsp;&nbsp;创新</h3>
        <ul class="content">
          <li>工程发包招人，就上喷喷涂涂</li>
          <li>施工队伍找活，就上喷喷涂涂</li>
          <li>设备工具采买，就上喷喷涂涂</li>
          <li>厂商原料供应，就上喷喷涂涂</li>
          <li>工具租赁二手，就上喷喷涂涂</li>
          <li>专业维修保养，就上喷喷涂涂</li>
          <li>涂装服务平台，就上喷喷涂涂</li>
        </ul>
        <div>
          <!-- <span class="phone" :style="{ backgroundImage: `url(${material.phoneImg})` }"></span> -->
          <span class="phone">
            <van-icon name="phone-o" />
          </span>
          <span>{{ mobile }}</span>
        </div>
        <div>
          <!-- <span class="location" :style="{ backgroundImage: `url(${material.locationImg })` }"></span> -->
          <span class="location">
            <van-icon name="location-o" />
          </span>
          <span
            >{{ address.substring(0, 42)
            }}{{ strlen(address) > 84 ? '...' : '' }}</span
          >
        </div>
        <span class="circle_left"></span>
        <span class="circle_right"></span>
        <van-divider dashed :hairline="false" class="line"></van-divider>
      </article>
      <!-- <span class="circle_left"></span>
      <span class="circle_right"></span>-->
      <!-- <van-divider dashed :hairline="false" class="line"></van-divider> -->
    </main>
  </section>
</template>
<script>
// import html2canvas from 'html2canvas';
import logo_default from '@/assets/images/logo.png';
import bgi from '@/assets/images/card-share/bgi.png';
import locationImg from '@/assets/images/card-share/location.png';
import phoneImg from '@/assets/images/card-share/phone.png';
import logo from '@/assets/images/card-share/logo2.png';
import icon from '@/assets/images/card-share/icon.png';
import wx from 'weixin-js-sdk';
import { Image, Row, Col, Divider, Toast, Loading } from 'vant';
import { createQrCode, cardInfo, userInfo } from '@/api/api';
import vueQr from 'vue-qr';

export default {
  name: 'card-share',
  data() {
    return {
      nickName: '',
      mobile: '',
      address: '',
      positionName: '',
      isManager: false,
      userId: '',
      qr_url: '',
      show_loadding: true,
      logo: logo_default,
      //locationPng: 'https://xintu361.oss-cn-qingdao.aliyuncs.com/02ckbqddhx4drkhm4mi2.png',
      // mobilePng: 'https://xintu361.oss-cn-qingdao.aliyuncs.com/wdufytw2s5e0uy4f8eds.png',
      avatar:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/loecx309uoghxz7yp0hq.png',
      qrcode: '',
      shareImgUrl:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/7m5wfskizg69a1dvp61g.jpg',
      my_card_imgUrl: {
        backgroundImage:
          "url('https://xintu361.oss-cn-qingdao.aliyuncs.com/7m5wfskizg69a1dvp61g.jpg')",
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
      },
      updated_count: 0,
      address_font_size: 14,
      show_button: false,
      title: '我的名片',
      desc: '省工省时上喷喷涂涂\n专业涂装服务平台',
      link: '',
      imgUrl:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/a3zj7my1ih02g8c39y2u.jpg',

      //new
      material: {
        bgi: bgi,
        locationImg: locationImg,
        phoneImg: phoneImg,
        logo: logo,
        icon: icon,
      },
    };
  },
  created() {
    //document.documentElement.style.fontSize = '16px';
    this.getParams();
  },
  // 只有data里的值改变才会触发，类似于watch
  updated() {
    //this.generateCanvas();
  },
  methods: {
    strlen(str) {
      var len = 0;
      for (var i = 0; i < str.length; i++) {
        var c = str.charCodeAt(i);
        //单字节加1
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
          len++;
        } else {
          len += 2;
        }
      }
      return len;
    },
    isIos() {
      var ua = navigator.userAgent.toLowerCase();
      if (/iphone|ipad|ipod/.test(ua)) {
        this.address_font_size = 10;
        return true;
      } else if (/android/.test(ua)) {
        this.address_font_size = 12;
        return false;
      }
    },
    async getParams() {
      // 取到路由带过来的参数
      this.userId = decodeURI(this.$route.query.shareId) || '';
      this.shareId = decodeURI(this.$route.query.userId) || '';
      //获取用户信息，用户是会员跳转到会员拉人注册页面
      await userInfo({ userId: this.userId }).then((res) => {
        if (res.data.data.userLevel == 2) {
          this.qr_url =
            process.env.VUE_APP_BASE_API +
            'wechat/#/verify/user?userId=' +
            this.userId +
            '&shareId=' +
            this.userId;
        } else {
          this.qr_url =
            process.env.VUE_APP_BASE_API +
            'wechat/#/verify/user?userId=' +
            this.shareId +
            '&shareId=' +
            this.userId;
        }

        // }else{
        //   //不准许跳转到拉人页面
        //   this.qr_url ='';
        // }
      });
      cardInfo({
        userId: this.userId,
      }).then((res) => {
        this.mobile = res.data.data.mobile || '';
        this.nickName = res.data.data.nickName || '昵称';
        this.tel = res.data.data.tel; // 售后电话
        this.avatar = res.data.data.avatar;
        this.address = res.data.data.address || '';
        this.positionName = res.data.data.positionName || '区域经理';
        this.qrcode = res.data.data.qrcode || '';
        if (res.data.data.userLevel >= 2) {
          this.isManager = true;
        }
        let str = window.location.href,
          num = str.indexOf('#'); //取得整个地址栏
        this.link = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ]
        console.log(str, 555);
        this.$wxShare({
          title: this.title,
          desc: this.desc,
          link: this.link,
          imgUrl: this.imgUrl,
        });
      });
    },
    getIsManager(value) {
      if (value == 'true') {
        return true;
      } else {
        return false;
      }
    },
    // generateCanvas() {
    //   let copyDom = document.querySelector('#content'); //要保存的dom
    //   // let width = document.documentElement.clientWidth; //dom宽
    //   // let height = document.documentElement.clientHeight; //dom高
    //   let width = 411; //根据背景图宽高计算出合适的值
    //   let height = 666;
    //   const scale = 2;
    //   html2canvas(document.querySelector('#content'), {
    //     dpi: 192,
    //     scale: scale,
    //     width: width,
    //     heigth: height,
    //     useCORS: true, //解决跨域问题
    //     allowTaint: false, //允许跨域图片
    //     x: 0,
    //     y: 0
    //   }).then(canvas => {
    //     // 【重要】关闭抗锯齿
    //     var context = canvas.getContext('2d');
    //     context.mozImageSmoothingEnabled = false;
    //     context.webkitImageSmoothingEnabled = false;
    //     context.msImageSmoothingEnabled = false;
    //     context.imageSmoothingEnabled = false;

    //     let dataURL = canvas.toDataURL('image/png');
    //     this.shareImgUrl = dataURL;
    //     this.show_button = true;
    //     this.show_loadding = false;
    //   });
    // }
  },
  components: {
    [Image.name]: Image,
    [Row.name]: Row,
    [Col.name]: Col,
    [Divider.name]: Divider,
    [Loading.name]: Loading,
    [vueQr.name]: vueQr,
  },
};
</script>
<style lang="scss" scoped>
h1,
h3 {
  margin: 7px 0;
  padding: 0;
  text-align: center;
}

h1 {
  margin: 5px 0 0 0;
  padding: 0;
  text-align: center;
}

h3 {
  transform: translateY(-6px);
  font-weight: 500;
  font-size: 14px;
}

section {
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  padding-bottom: 3.47% !important;
  position: relative;
  display: flex;
  flex-direction: column;

  header {
    height: 10.15%;
    transform: translateY(-1px);
    background-size: 100% 110%;
  }

  main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 13.46% 3.47% 13.46%;
    transform: translateY(5px);

    .top {
      //height: 220px;
      background-color: #fff;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      display: flex;
      flex: 4;

      .qr-box {
        margin-bottom: 3px;
        // margin-top: -20px;
        width: 50%;
      }

      .button-box {
        padding: 0 5px;
        text-align: center;
        font-size: 11px;
        height: 25px;
        background-color: #0088e0;
        border-radius: 25px;
        color: #fff;
        line-height: 25px;
        margin-top: 8px;
      }
    }

    .bottom {
      justify-content: center;
      display: flex;
      flex: 5;
      background-color: white;
      align-items: center;
      flex-direction: column;
      position: relative;

      .content {
        margin-top: 1;
        background-color: #0088e0;
        padding: 10px 20px 10px 20px;
        border-radius: 8px;
        margin: 0 auto;
        font-size: 0.7rem;
        width: 80%;
        text-align: center;
        color: #fff;
        transform: translateY(-5px);

        > li {
          padding: 1.5px 0;
        }
      }

      .content + div,
      .content + div + div {
        width: 80%;
        text-align: left;
        overflow-x: hidden;
        display: flex;
      }

      .phone,
      .location {
        display: block;
        height: 20px;
        width: 20px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 0 20px;
        //margin-right: 10px;
      }

      .phone + span,
      .location + span {
        display: block;
        flex: 1;
        font-size: 11px;
      }

      /**圆*/
      .circle_left {
        top: 0;
        position: absolute;
        display: block;
        width: 17.5px;
        height: 35px;
        background-color: #0088e0;
        border-radius: 0 35px 35px 0;
        width: 17.5px;
        height: 35px;
        z-index: 1;
        left: 0;
        transform: translateY(-17.5px);
      }

      .circle_right {
        top: 0;
        position: absolute;
        display: block;
        width: 17.5px;
        height: 35px;
        background-color: #0088e0;
        border-radius: 35px 0 0 35px;
        width: 17.5px;
        height: 35px;
        z-index: 1;
        right: 0;
        transform: translateY(-17.5px);
      }

      .line {
        top: 0;
        margin: 0 auto;
        width: calc(100% - 35px);
        border-color: #222222;
        position: absolute;
      }
    }
  }
}
</style>
